var num;

start()

function start() {
    //载入加载
    $('.main_contener tbody').ready(function () {
        paging();
        del();
        redact();
        btnBigChange();
        $('#inquire').click(inquire);
        $('#btnReset').click(reset);
    });
}



//大按钮背景更改
function btnBigChange() {
    $('.btnBig').mouseover(function () {
        this.style.opacity = '.8';
    });
    $('.btnBig').mouseout(function () {
        this.style.opacity = '1';
    });
}
//小按钮背景更改
function btnSmallChange() {
    $('.btnSmall').mouseover(function () {
        this.style.opacity = '.8';
    })
    $('.btnSmall').mouseout(function () {
        this.style.opacity = '1';
    })
}

//删除
function del() {
    $('tbody tr  div:nth-child(3)').click
        (function () {
            //删除tbody内的tr
            $(this).parent().parent().parent().remove();
            //删除数组内的元素
            let delId = Number($(this).parent().parent().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev()[0].innerText);
            // console.log(delId);

            for (let i = 0; i < house.length; i++) {
                if (delId == house[i].id) {
                    house.splice(i, 1);
                    // console.log(1);
                }
            }
            // console.log(place);
        })
}



//添加按钮事件
$('#btnAdd').click(function () {
    // console.log(1);
    // id="mainBodyChoice"
    // id="zoneOfPreference"
    // id="houseNumber"
    // id="HouseName"
    // id="HousingType"
    // id="BuildingCondition"
    // id="TypeOfLeaseAndSale"
    // id="area"
    // id="postscript"
    // $('#popup').css('display', 'block');
    $("#popup").show();
    $('#popup').animate({
        top: '100px',
    }, 500)
    document.getElementById('mainBodyChoice').value = '全部';
    document.getElementById('zoneOfPreference').value = '';
    document.getElementById('houseNumber').value = '';
    document.getElementById('HouseName').value = '';
    document.getElementById('HousingType').value = '全部';
    document.getElementById('BuildingCondition').value = '全部';
    document.getElementById('TypeOfLeaseAndSale').value = '全部';
    document.getElementById('area').value = '';
    document.getElementById('postscript').value = '';
    $('#BtnSubmit').click(btnSubmit);
})

//添加提交按钮
function btnSubmit() {
    let mainBodyChoice = document.getElementById('mainBodyChoice').value;
    let zoneOfPreference = document.getElementById('zoneOfPreference').value;
    let houseNumber = document.getElementById('houseNumber').value;
    let HouseName = document.getElementById('HouseName').value;
    let HousingType = document.getElementById('HousingType').value;
    let BuildingCondition = document.getElementById('BuildingCondition').value;
    let TypeOfLeaseAndSale = document.getElementById('TypeOfLeaseAndSale').value;
    let area = document.getElementById('area').value;
    let postscript = document.getElementById('postscript').value;
    // let PrincipalName = document.getElementById('PrincipalName').value;

    // id: 1,
    // houseNumber: '12345',
    // PrincipalName: '民生广场',
    // RegionName: 'A区',
    // HouseName:'豪华办公室',
    // HousingType:'房间',
    // BuildingCondition:'空置',
    // TypeOfLeaseAndSale:'出租',
    // area: '30',
    // remark: '无备注'

    //Alert
    layer.alert('提交成功！')
    house.push({ id: house.length + 1, houseNumber, PrincipalName: mainBodyChoice, RegionName: zoneOfPreference, HouseName: HouseName, HousingType: HousingType, BuildingCondition: BuildingCondition, TypeOfLeaseAndSale, area, remark: postscript });
    // $('#popup').css('display', 'none');
    $("#popup").animate({
        top: "500px",
    },
        500)
    $("#popup").fadeOut(500);

    reset()
}


// 编辑按钮
function redact() {
    let show;
    $('tbody tr div div:nth-child(2)').click(function () {
        // id: 1, PrincipalName: '原生广场', displayStatus: '显示', remark: '无备注', RegionName: 'A区' 
        let id = $(this).parent().parent().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev()[0].innerText;
        //获取当前按钮id
        for (let i = 0; i < house.length; i++) {
            if (house[i].id == id) {
                num = i;
                break;
            }
        }
        // $('#popup2').css('display', 'block');
        $("#popup2").show();
        $('#popup2').animate({
            top: '100px',
        }, 500)
        $('#popup2 .header_right')[0].innerText = '详情'

        // document.getElementById('mainBodyChoice').value = '全部';
        // document.getElementById('zoneOfPreference').value = '';
        // document.getElementById('houseNumber').value = '';
        // document.getElementById('HouseName').value = '';
        // document.getElementById('HousingType').value = '全部';
        // document.getElementById('BuildingCondition').value = '全部';
        // document.getElementById('TypeOfLeaseAndSale').value = '全部';
        // document.getElementById('area').value = '';
        // document.getElementById('postscript').value = '';

        // id: 1,
        // houseNumber: '12345',
        // PrincipalName: '民生广场',
        // RegionName: 'A区',
        // HouseName:'豪华办公室',
        // HousingType:'房间',
        // BuildingCondition:'空置',
        // TypeOfLeaseAndSale:'出租',
        // area: '30',
        // remark: '无备注'

        document.getElementById('mainBodyChoice2').value = house[num].PrincipalName;
        document.getElementById('zoneOfPreference2').value = house[num].RegionName;
        document.getElementById('houseNumber2').value = house[num].houseNumber;
        document.getElementById('HouseName2').value = house[num].HouseName;
        document.getElementById('HousingType2').value = house[num].HousingType;
        document.getElementById('BuildingCondition2').value = house[num].BuildingCondition;
        document.getElementById('TypeOfLeaseAndSale2').value = house[num].TypeOfLeaseAndSale;
        document.getElementById('area2').value = house[num].area;
        document.getElementById('postscript2').value = house[num].remark;
        
        btnS2 = document.getElementById('BtnSubmit2');
        btnS2.onclick = function () {
            btnSubmit2(num);
        }
        // $('#BtnSubmit2').click(btnSubmit2);

    })

}

//编辑提交
function btnSubmit2(num) {
    let mainBodyChoice = document.getElementById('mainBodyChoice2').value;
    let zoneOfPreference = document.getElementById('zoneOfPreference2').value;
    let houseNumber = document.getElementById('houseNumber2').value;
    let HouseName = document.getElementById('HouseName2').value;
    let HousingType = document.getElementById('HousingType2').value;
    let BuildingCondition = document.getElementById('BuildingCondition2').value;
    let TypeOfLeaseAndSale = document.getElementById('TypeOfLeaseAndSale2').value;
    let area = document.getElementById('area2').value;
    let postscript = document.getElementById('postscript2').value;
    

    //Alert
    // $('#popup2').css('display', 'none');
    $("#popup2").animate({
        top: "500px",
    },
        500)
    $("#popup2").fadeOut(500);
    house.splice(num, 1, { id: num + 1, houseNumber, PrincipalName: mainBodyChoice, RegionName: zoneOfPreference, HouseName: HouseName, HousingType: HousingType, BuildingCondition: BuildingCondition, TypeOfLeaseAndSale, area, remark: postscript });
    layer.alert('提交成功！')
    reset()//重置
}

//查询按钮
function inquire() {
    // { id: 1, PrincipalName: '原生广场', displayStatus: '显示', remark: '无备注', RegionName: 'A区' },
    let HouseNumber = $('#HouseNumber').val();//输入框
    let tbody = $('tbody')[0];
    document.querySelector('tbody').innerHTML = '';
    for (let i = 0; i < house.length; i++) {
        if (house[i].houseNumber == HouseNumber) {
            let tr = '<tr><td>' + (house[i].id) + '</td><td>' + (house[i].houseNumber) + '</td><td>' + (house[i].PrincipalName) + '</td><td>' + (house[i].RegionName) + '</td><td>' + (house[i].HouseName) + '</td><td>' + (house[i].HousingType) + '</td><td>' + (house[i].BuildingCondition) + '</td><td>' + (house[i].TypeOfLeaseAndSale) + '</td><td>' + (house[i].area) + '</td><td>' + (house[i].remark) + '</td><td><div class="displayFlex_left " id = "btnSmallSum"><div class="btnSmall" id = "btnredact">编辑</div><div class="btnSmall bgCRed" >删除</div></div></td></tr>';
            // console.log(place[i].id);
            $('.main_contener tbody').append(tr);
        }
    }
}

//重置
function reset() {
    document.getElementById('HouseNumber').value = '';//输入框

    onloude(0, 5);//初始页面信息，第一页
    console.log(123)
    start()
}

//分页
function paging() {
    let page = 1;//第几页
    let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
    let serialNumber = house.length;//序号
    onloude(0, 5);//初始页面信息，第一页
    $("#inputPage").val(page);//页码
    $("#spanSerialNumber").text(serialNumber);//数据条数

    // 下一页
    $("#nextpage").click(function () {
        if (no + 5 < serialNumber) {//如果no+5小于数据条数
            no += 5;
            page++;
            $("#inputPage").val(page);
            if (serialNumber >= (no + 5)) {//从新加载页面
                onloude(no, no + 5);
            } else (
                onloude(no, serialNumber)

            )
        }
        del()
        $('#btnAdd').click(function () {
            // console.log(1);
            $('.popup').css('display', 'block');
            $('#BtnSubmit').click(btnSubmit);

        })
        redact()
    });

    // 上一页
    $("#lastpage").click(function () {
        if (no - 5 >= 0) {
            no -= 5;
            page--;
            $("#inputPage").val(page);
            onloude(no, no + 5);
        }
        del()
        $('#btnAdd').click(function () {
            // console.log(1);
            $('.popup').css('display', 'block');
            $('#BtnSubmit').click(btnSubmit);

        })
        redact()
    });
}
//加载所有数据
// onloude(0,5)
function onloude(n, a) {
    document.querySelector('tbody').innerHTML = '';
    for (let i = n; i < a; i++) {
        let tr = '<tr><td>' + (house[i].id) + '</td><td>' + (house[i].houseNumber) + '</td><td>' + (house[i].PrincipalName) + '</td><td>' + (house[i].RegionName) + '</td><td>' + (house[i].HouseName) + '</td><td>' + (house[i].HousingType) + '</td><td>' + (house[i].BuildingCondition) + '</td><td>' + (house[i].TypeOfLeaseAndSale) + '</td><td>' + (house[i].area) + '</td><td>' + (house[i].remark) + '</td><td><div class="displayFlex_left " id = "btnSmallSum"><div class="btnSmall bgCRreen" id = "btnredact">详情</div><div class="btnSmall" id = "btnredact">编辑</div><div class="btnSmall bgCRed" >删除</div></div></td></tr>';
        // console.log(place[i].id);
        $('.main_contener tbody').append(tr);
    }
    btnSmallChange();

}


//给父页面传值
$('#transmit').on('click', function () {
    parent.$('#parentIframe').text('我被改变了');
    parent.layer.tips('Look here', '#parentIframe', { time: 5000 });
    parent.layer.close(index);
});

$('.header_btn').click(function () {
    $("#popup").animate({
        top: "500px",
    },
        500)
    $("#popup").fadeOut(500);
    $("#popup2").animate({
        top: "500px",
    },
        500)
    $("#popup2").fadeOut(500);
})